<template>
	<view class="page">
		<Navbar :title="pageTitle" />
		<u-sticky customNavHeight="0" z-index="6">
			<u-image show-loading :src="detail.cover_img" width="100%" height="248px" @click="preImage" />
		</u-sticky>
		<view class="body">
			<view class="tag">丘山阅</view>
			<view class="mark">丘山阅镇</view>
			<Sub-title :label="detail.site_name" bottom-color="#E9F4F4" />
			<view class="base">
				<view>
					<u-text :text="detail.open_hours || '-'" prefix-icon="clock-fill"
						icon-style="font-size: 28rpx; color: #3BA199; margin-right: 20rpx" lines="1" line-height="60rpx"
						color="#555555" size="28rpx" />
					<u-text :text="detail.address || '-'" prefix-icon="map-fill"
						icon-style="font-size: 28rpx; color: #1A98FC; margin-right: 20rpx" lines="1" line-height="60rpx"
						color="#555555" size="28rpx" @click="handleMap" />
					<u-text :text="detail.phone || '-'" prefix-icon="phone-fill"
						icon-style="font-size: 28rpx; color: #2CB9A4; margin-right: 20rpx" lines="1" line-height="60rpx"
						color="#555555" size="28rpx" @click="callPhone" />
					<u-text text="优惠券" prefix-icon="coupon-fill"
						icon-style="font-size: 28rpx; color: #EC9B51; margin-right: 20rpx" lines="1" line-height="60rpx"
						color="#555555" size="28rpx" />
				</view>
				<view class="base-right">
					<view>
						<view class="price">
							<text>售价</text>
							<text>￥</text>
							<text>{{ detail.price }}</text>
						</view>
						<view class="sale"> 已售：{{ detail.sold_num }} </view>
					</view>
					<view @click="handleCoupon">
						<u-input v-model="coupon.name" disabled disabled-color="#ffffff"
							:placeholder="couponList.length > 0 ? '请选择优惠券' : '暂无优惠券'" font-size="28rpx"
							input-align="right" suffix-icon="arrow-right" suffix-icon-style="color: #909399"
							:placeholder-style="placeholderStyle" border="none" />
					</view>
				</view>
			</view>
			<Sub-title label="套餐图文" bottom-color="#E9F4F4" />
			<u-parse :content="detail.content" />
			<view class="btn">
				<view class="center-btn" :class="{ disabled: timeout }" @click="handlePay">
					提交订单
				</view>
			</view>
		</view>
		<Coupon-popup v-model="couponShow" :list="couponList" @close="closeCoupon" @confirm="confirmCoupon" />
	</view>
</template>

<script>
	import Navbar from "@/components/Navbar/index";
	import CouponPopup from "@/pages/home/cp/CouponPopup";

	import {
		homePartyDetail,
		homeAddOrder
	} from "@/request/homeApi.js";
	import {
		myCouponList
	} from "@/request/myApi.js";
	export default {
		components: {
			Navbar,
			CouponPopup
		},
		data() {
			return {
				pageTitle: "", // 页面标题
				detail: {}, // 详情内容
				coupon: {}, // 优惠券信息
				couponShow: false, // 优惠券弹窗
				couponList: [], // 优惠券列表
			};
		},
		onLoad(e) {
			this.pageTitle = decodeURIComponent(e.title);
			this.getData(e.id);
		},
		computed: {
			// 是否已过期
			timeout() {
				let end = Number(new Date(this.detail.end_time + " 23:59:59"));
				let now = Number(new Date());
				return now > end;
			},
		},
		// 监听页面滚动
		onPageScroll(scroll) {
			uni.$emit("onPageScroll", scroll.scrollTop);
		},
		methods: {
			// 预览图片
			preImage() {
				uni.previewImage({
					urls: [this.detail.cover_img],
				});
			},
			// 点击拨号
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.detail.phone,
				});
			},
			// 打开优惠券弹窗
			handleCoupon() {
				this.couponShow = true;
			},
			// 关闭优惠券弹窗
			closeCoupon() {
				this.couponShow = false;
			},
			// 选择优惠券
			confirmCoupon(v) {
				if (v.type == "reduction") {
					v.name = `满${Number(v.limit)}减${Number(v.price)}`;
				}
				if (v.type == "discount") {
					v.name = `满${Number(v.limit)}打${Number(v.discount)}折`;
				}
				if (v.choice) {
					this.coupon = v;
				} else {
					this.coupon = {
						name: ""
					};
				}
				this.couponShow = false;
			},
			// 获取优惠券列表
			getCouponList() {
				let data = {
					shop_id: 0, // 不需要指定店铺
					page: 1,
					state: 1,
					price: this.detail.price,
				};
				this.couponList = [];
				myCouponList(data).then((res) => {
					if (res.code == 1) {
						this.couponList = res.data.data;
					}
				});
			},
			// 跳转地图
			handleMap() {
				const {
					lat,
					lng,
					address
				} = this.detail;
				// uni.openLocation({
				//   latitude: lat,
				//   longitude: lng,
				//   address: address,
				//   scale: 16,
				// });
				uni.navigateTo({
					url: `/pages/parse/map?lat=${lat}&lng=${lng}`
				});
			},
			// 获取详情
			getData(id) {
				homePartyDetail({
					id
				}).then((res) => {
					if (res.code == 1) {
						this.detail = res.data;
						this.getCouponList();
					}
				});
			},
			// 提交订单
			handlePay() {
				if (this.timeout) {
					uni.showToast({
						title: "该活动已结束",
						icon: "none",
					});
					return;
				}
				this.$author(() => {
					let data = {
						type: "party",
						id: this.detail.id,
						coupon_id: this.coupon?.id,
						number: 1,
					};
					homeAddOrder(data).then((res) => {
						if (res.code == 1) {
							console.log(res.data);
							let {
								list,
								token
							} = res.data;
							uni.navigateTo({
								url: `/pages/mall/cashier?token=${token}&data=${JSON.stringify(list)}`,
							});
						}
					});
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		.body {
			width: 100%;
			padding: 20rpx 20rpx 180rpx 20rpx;
			z-index: 8;
			min-height: 100rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			margin-top: -80rpx;
			border-radius: 40rpx 40rpx 0 0;
			position: relative;

			.mark {
				position: absolute;
				top: -80rpx;
				right: 30rpx;
				width: 172rpx;
				height: 56rpx;
				color: #fff;
				font-size: 28rpx;
				line-height: 56rpx;
				text-align: center;
				border-radius: 40rpx;
				background-color: #0000006b;
			}

			.tag {
				position: absolute;
				right: 0;
				top: 40rpx;
				color: #fff;
				font-weight: 600;
				font-size: 32rpx;
				background-color: #3ba199cc;
				padding: 4rpx 24rpx;
				border-radius: 24rpx 0 0 24rpx;
			}

			.base {
				display: flex;
				align-items: center;
				justify-content: flex-start;

				>view:first-child {
					flex: 1;
				}

				.base-right {
					>view:first-child {
						display: flex;
						height: 180rpx;
						flex-direction: column;
						align-items: flex-end;
						justify-content: space-between;

						.price {
							line-height: 60rpx;
							color: #ff3e3e;
							font-weight: 600;

							>text:first-child {
								font-size: 28rpx;
							}

							>text:nth-child(2) {
								font-size: 24rpx;
							}

							>text:last-child {
								font-size: 32rpx;
							}
						}

						.sale {
							line-height: 60rpx;
							color: $active-color;
							font-size: 24rpx;
							font-weight: 600;
						}
					}

					>view:last-child {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						text {
							color: #555555;
							font-size: 28rpx;
							margin-left: 12rpx;
						}
					}
				}
			}
		}

		.btn {
			position: fixed;
			background-color: #fff;
			box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.05);
			display: flex;
			align-items: center;
			height: 126rpx;
			padding: 20rpx;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 9;

			.center-btn {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				text-align: center;
				color: $active-color;
				background-color: #cee7e5;
				border-radius: 40rpx;
			}

			.disabled {
				color: #f9f9f9;
				background-color: #dbdbdb;
			}
		}
	}
</style>